<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li> 知否知否， 点我应有弹框在手 </li>
        <li> 知否知否， 点我应有弹框在手 </li>
        <li> 知否知否， 点我应有弹框在手 </li>
        <li> 知否知否， 点我应有弹框在手 </li>
        <li> 知否知否， 点我应有弹框在手 </li>
    </ul>


    <script>
        // 事件冒泡本身的特性，会带来的坏处，也会带来的好处。需要我们灵活掌握。生活中有如下场景：
        // 程序中也有以下的场景：

        //<ul>
        //     
        // <li> 知否知否， 点我应有弹框在手 </li> 
        // <li> 知否知否， 点我应有弹框在手 </li> 
        // <li> 知否知否， 点我应有弹框在手 </li> 
        // <li> 知否知否， 点我应有弹框在手</li> 
        // <li> 知否知否， 点我应有弹框在手 </li>  
        //</ul>

        //点击每个li都会弹出对话框， 以前需要给每个li注册事件， 是非常辛苦的， 而且访问DOM的次数较多，这就会延长整个页面的交互就绪时间

        // 事件委托：事件委托也称为事件代理，在JQuery里面称为事件委派
        // 事件委托的原理：不要给每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子结点
        // 以上案例给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，因为点击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器
        // 事件委托的作用： 我们只操作了以此DOM，提高了程序的性能

        // 事件委托的原理：不要给每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子结点
        // 我们点击的是li，li有事件冒泡，会往上传，ul设置了事件，就会弹出弹框
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            alert('知否知否， 点我应有弹框在手');
            // e.target 这个可以得到我们的事件对象  可以利用它得到我们点击的是哪个li 将其背景颜色设置为pink
            e.target.style.backgroundColor = 'pink';
        })
    </script>
</body>

</html>